<template>
    <div class=" pl-[50px] pt-10 w-full h-full">
        <form @submit.prevent="submit" class=" relative w-full">
            <p><span>姓名：</span><input type="text" v-model.trim="userinfo.name" /></p>
            <p>
                <span>性别：</span>
                <input type="radio" name="sex" id="nan" v-model="userinfo.sex" value="男" />
                <label for="nan">男</label>
                <input type="radio" name="sex" id="nv" v-model.string="userinfo.sex" value="女" />
                <label for="nv">女</label>
            </p>
            <p><span>生日：</span><input type="text" v-model="userinfo.birthday" /></p>
            <p><span>手机号：</span><input type="text" v-model="userinfo.tel" /></p>
            <p><span>邮箱：</span><input type="text" v-model="userinfo.email" /></p>
            <p>
                <span>地址：</span>
                <select v-model="userinfo.address">
                    <option value="">请选择</option>
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="天津">天津</option>
                    <option value="四川">四川</option>
                    <option value="云南">云南</option>
                    <option value="贵州">贵州</option>
                    <option value="广东">广东</option>
                    <option value="广西">广西</option>
                    <option value="江西">江西</option>
                </select>
            </p>
            <p><span>密码：</span><input type="password" v-model="userinfo.pwd"></p>
            <p><span>确认密码：</span><input type="password" v-model="userinfo.repwd"></p>
            <p>
                <input type="checkbox" v-model="userinfo.agree" id="read" />
                <label for="read">同意协议</label>
            </p>
            <button class=" absolute right-[200px] w-40 h-10 bg-green-400 font-bold text-red-500 mt-5">立即注册</button>
        </form>
    </div>

</template>

<script>
import API from "../utils/API/index.js";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
let user = {}
export default {
    data() {
        return {
            userinfo: {
                name: '',
                sex: '',
                birthday: '',
                tel: '',
                email: '',
                address: '',
                pwd: '',
                repwd: '',
                photo: null,
                agree: false
            },
        };
    },
    methods: {
        submit() {
            // JSON.stringify 从一个对象中解析出字符串
            // JSON.parse() 从一个字符串中解析出JSON对象
            // console.log(this.userinfo);
            // console.log(JSON.parse(JSON.stringify(this.userinfo)));
            user = JSON.parse(JSON.stringify(this.userinfo))


            //对输入框中的每个值校验，若为空则报错
            // user.forEach(element => {
            //     if (element == '') {
            //         alert("输入框不能为空！")
            //         return
            //     }
            // });

            //实现密码确认
            if (user.pwd !== user.repwd) {
                alert("两次密码不一致，请重新输入！")
                return
            }

            //判断是否同意协议
            if (!user.agree) {
                alert("请勾选同意协议！");
                return
            }

            alert("注册成功");
            router.push({
                name: 'my'
            })

            // API.customInfo.add(user).then(res => {
            //     //返回拦截器返回的数据
            //     console.log(res)
            // }).catch(error => {
            //     console.log(error);
            // })
        }
    }
}

</script>

<style scoped lang="scss">
p {
    margin-bottom: 15px;
}

span {
    display: inline-block;
    width: 80px;

}
</style>
